﻿<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	xmlns:myBoard_App_Model="clr-namespace:myBoard.App.Model"
	x:Class="myBoard.App.FeaturedMagnetControl"
	x:Name="UserControl"
	d:DesignWidth="880" d:DesignHeight="236" FontFamily="Aharoni">

	<UserControl.Resources>
		<myBoard_App_Model:FakeModel x:Key="FakeModelDataSource" d:IsDataSource="True"/>
		<VisualBrush x:Key="MagnetScreenshotVisual" Visual="{Binding ElementName=border}"/>
		<VisualBrush x:Key="screenshotContainerBrush" Visual="{Binding ElementName=screenshotContainer}"/>
	</UserControl.Resources>

	<Border BorderBrush="#FFB7B7B7" BorderThickness="1" Background="White">
		<Border Margin="3">
			<Border.Background>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FFE2E2E2" Offset="0"/>
					<GradientStop Color="White" Offset="0.646"/>
				</LinearGradientBrush>
			</Border.Background>

			<Grid x:Name="LayoutRoot">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="0.7*"/>
					<ColumnDefinition Width="0.3*"/>
				</Grid.ColumnDefinitions>
				<Grid.RowDefinitions>
					<RowDefinition Height="40"/>
					<RowDefinition Height="30"/>
					<RowDefinition Height="Auto"/>
					<RowDefinition Height="*"/>
				</Grid.RowDefinitions>
				<Image HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="1"/>
				<TextBlock HorizontalAlignment="Left" Margin="5,0,0,0" VerticalAlignment="Center" FontSize="24" Text="FEATURED MAGNET" TextWrapping="Wrap">
					<TextBlock.Foreground>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#FF3D3D3D" Offset="0"/>
							<GradientStop Color="#FF727272" Offset="1"/>
						</LinearGradientBrush>
					</TextBlock.Foreground>
				</TextBlock>
				<TextBlock HorizontalAlignment="Left" Margin="5,0,0,0" VerticalAlignment="Center" Grid.Row="1" FontSize="16" Foreground="#FF616161" Text="{Binding Name, Mode=Default}" TextWrapping="Wrap"/>
				<TextBlock Margin="5,5,5,0" Grid.Row="2" FontFamily="Candara" Foreground="#FF616161" Text="{Binding LongDesc, Mode=Default}" TextTrimming="WordEllipsis" TextWrapping="Wrap"/>
				<Border ClipToBounds="True" Grid.Row="3" HorizontalAlignment="Right" Margin="0,-23.592,0,0" Width="466.6" Grid.ColumnSpan="2">
					<Border.OpacityMask>
						<LinearGradientBrush EndPoint="0.981,0.5" StartPoint="0.21,0.5">
							<GradientStop Color="#00000000" Offset="0"/>
							<GradientStop Color="White" Offset="1"/>
						</LinearGradientBrush>
					</Border.OpacityMask>
					<Rectangle Margin="0">
						<Rectangle.Fill>
							<RadialGradientBrush GradientOrigin="0.693,-0.127" RadiusX="0.857" RadiusY="2.306">
								<GradientStop Color="#FF616161"/>
								<GradientStop Offset="1"/>
							</RadialGradientBrush>
						</Rectangle.Fill>
					</Rectangle>
				</Border>
				<Border Grid.Column="1" Grid.RowSpan="4" d:IsEffectDisabled="True" ClipToBounds="True" BorderThickness="1,0,0,0">
					<Grid>
						<Grid.RowDefinitions>
							<RowDefinition Height="0.611*"/>
							<RowDefinition Height="0.389*"/>
						</Grid.RowDefinitions>
						<Border ClipToBounds="True" Grid.Row="1" d:IsHidden="True" Visibility="Collapsed">
							<Rectangle Margin="0,-61.349,0,0">
								<Rectangle.Fill>
									<RadialGradientBrush GradientOrigin="0.5,0.395" RadiusX="1.038" RadiusY="0.923">
										<GradientStop Color="#FF616161"/>
										<GradientStop Offset="1"/>
									</RadialGradientBrush>
								</Rectangle.Fill>
							</Rectangle>
						</Border>
						<Grid Grid.RowSpan="2" Margin="0,0,0,-35" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center">
							<Grid.RenderTransform>
								<TransformGroup>
									<ScaleTransform/>
									<SkewTransform/>
									<RotateTransform/>
									<TranslateTransform Y="32"/>
								</TransformGroup>
							</Grid.RenderTransform>
							<Grid.RowDefinitions>
								<RowDefinition Height="0.5*"/>
								<RowDefinition Height="0.5*"/>
							</Grid.RowDefinitions>
							<Border x:Name="screenshotContainer" BorderBrush="White" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center">
								<Border BorderThickness="5" HorizontalAlignment="Center" VerticalAlignment="Center">
									<Border.BorderBrush>
										<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
											<GradientStop Color="#FF5B5B5B" Offset="0"/>
											<GradientStop Color="Black" Offset="1"/>
										</LinearGradientBrush>
									</Border.BorderBrush>
									<Image Source="{Binding ScreenshotsUrl[0], Mode=Default}" Margin="-1"/>
								</Border>
							</Border>
							<Rectangle Grid.Row="1" Width="{Binding ActualWidth, ElementName=screenshotContainer, Mode=Default}" Height="{Binding ActualHeight, ElementName=screenshotContainer, Mode=Default}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center">
								<Rectangle.OpacityMask>
									<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
										<GradientStop Color="#70000000" Offset="0"/>
										<GradientStop Offset="0.358"/>
									</LinearGradientBrush>
								</Rectangle.OpacityMask>
								<Rectangle.Fill>
								 <VisualBrush Visual="{Binding ElementName=screenshotContainer}"/>
								</Rectangle.Fill>
								<Rectangle.RenderTransform>
									<TransformGroup>
										<ScaleTransform ScaleX="1" ScaleY="-1"/>
										<SkewTransform AngleX="0" AngleY="0"/>
										<RotateTransform Angle="0"/>
										<TranslateTransform/>
									</TransformGroup>
								</Rectangle.RenderTransform>
							</Rectangle>
						</Grid>
					</Grid>
				</Border>
				<StackPanel Grid.Row="3" Orientation="Horizontal" d:LayoutOverrides="Height" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0">
					<Button x:Name="_detailsBt" Command="{Binding SelectMagnetCmd, Mode=Default}" CommandParameter="{Binding Mode=OneWay}" HorizontalAlignment="Center" Style="{DynamicResource StoreButtonStyle1}" VerticalAlignment="Center" Width="110" Height="22" Content="Read more ..." FontFamily="Century Gothic" Foreground="White" Margin="0" Cursor="Hand"/>
				</StackPanel>
			</Grid>
		</Border>
	</Border>
</UserControl>